<template>
<div class="bottom-cell-container">
      <div class="bottom-area">
      <van-cell center>
          <template #title>
              <div class="btn">
              <van-button type="default" round  @click="isShowEditCommentArea=!isShowEditCommentArea">写评论...</van-button>
              </div>
          </template>
          <template #default>
              <van-icon name="good-job" :class="{'active-liking':essayContent.attitude===0}" @click="onLiking"/>
              <van-icon name="star" :class="{'active-collect':essayContent.is_collected}" @click="onFollow"/>
               <van-icon name="comment-o"  :badge="commentTotal"/>
             <van-icon name="share-o" />
          </template>
      </van-cell>
      </div>
      <!-- 弹出层 -->
      <van-popup
      v-model="isShowEditCommentArea"
      round
      position="bottom"
      closeable
      safe-area-inset-bottom
      >
      <van-field
        rows="6"
        v-model="message"
        type="textarea"
        maxlength="50"
        placeholder="请输入留言"
        show-word-limit
      />
      <div><van-button type="default" size="mini" round @click="onPost" :disabled="!message">发表</van-button></div>
      </van-popup>
</div>
</template>

<script>
import { likingEssay, cancelLikingEssay, followEssay, cancelFollowEssay } from 'network/news'
import { mapState } from 'vuex'
export default {
  name: 'BottomCell',
  props: {
    essayId: {
      type: [String, Number, Object],
      required: true
    },
    essayContent: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      // 控制留言的弹出层开关
      isShowEditCommentArea: false,
      // 留言内容
      message: ''
    }
  },
  methods: {
    // 没点赞就点赞,点赞了就取消点赞
    async onLiking () {
      if (!this.userState) {
        return this.$toast.fail('您还没有登录o(╯□╰)o')
      }
      this.$toast.loading({
        message: '处理中...',
        forbidClick: true,
        duration: 5000
      })
      try {
        if (this.essayContent.attitude === -1) {
          await likingEssay(this.essayId)
          this.essayContent.attitude = 0
          this.$toast.success('点赞成功(^o^)/~')
        } else {
          await cancelLikingEssay(this.essayId)
          this.essayContent.attitude = -1
          this.$toast.success('取消点赞成功(^o^)/~')
        }
      } catch (error) {
        this.$toast('哎呀网络好像出问题了,再试一次吧')
      }
    },
    // 有收藏取消收藏,没收藏给收藏
    async onFollow () {
      if (!this.userState) {
        return this.$toast.fail('您还没有登录o(╯□╰)o')
      }
      this.$toast.loading({
        message: '处理中...',
        forbidClick: true,
        duration: 3000
      })
      try {
        if (this.essayContent.is_collected === false) {
          await followEssay(this.essayId)
          this.essayContent.is_collected = true
          this.$toast.success('收藏成功♪(^∇^*)')
        } else {
          await cancelFollowEssay(this.essayId)
          this.essayContent.is_collected = false
          this.$toast.success('取消收藏成功\\(^o^)/~')
        }
      } catch (error) {
        this.$toast('哎呀网络好像出问题了,再试一次吧')
      }
    },
    // 发布评论(这里只处理对文章的评论,评论回复另外处理)
    onPost () {
      console.log('弟弟')
      if (!this.userState) {
        return this.$toast({
          message: '哎呀没登录呢老总o(╯□╰)o'
        })
      }
      this.$bus.$emit('on-post', this.message)
      this.isShowEditCommentArea = false
      this.message = ''
    }
  },
  computed: {
    ...mapState(['userState', 'commentTotal'])
  }
}
</script>

<style lang='less' scoped>
  .bottom-cell-container{
      .btn{
        .van-button{
            height: 21px;
            width: 142px;
            font-size: 15px;
            color: #a7a7a7;
            justify-content: flex-start;
        }
      }
      .van-popup{
        display: flex;
        align-items: center;
        .van-button{
          width: 60px;
          margin-right: 10px;
          background-color: pink;
        }
      }
      .bottom-area{
           .van-cell{
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          height: 49px;
          .van-icon{
             font-size: 23px;
             &:not(:last-child){
                   margin-right: 24px;
             }
             &:nth-child(3){
                 top: 2px;
             }
          }
            .van-cell__value {
                 flex: unset;
                 top:6px;
                 overflow: unset;
             }
            // /deep/ .van-info{
            //     top: 4px
            // }
      }
      }
  }
  .active-liking{
      color: pink;
    //   background: skyblue;
  }
  .active-collect{
    color: orange;
  }
</style>
